<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { getLabelList, getTeacherList, getUserList } from '@/api/counselor';
import { TeacherType } from '@/api/counselor/module';
import { getToken } from '@/utils/auth';
// import { ElMessageBox } from 'element-plus';
const ruleFormRef = ref<FormInstance>();

const ruleForm = reactive({
    name: '',
    mobile: ''
});
const submitForm = () => {
    params.value.name = ruleForm.name;
    params.value.mobile = ruleForm.mobile;
    getList();
};
const resetForm = (formEl: FormInstance | undefined) => {
    ruleForm.name = '';
    ruleForm.mobile = '';
    params.value.name = ruleForm.name;
    params.value.mobile = ruleForm.mobile;
    // if (!formEl) return;
    // formEl.resetFields();
    if (ruleFormRef.value) {
        console.log(ruleFormRef.value);
        ruleFormRef.value.resetFields();
    }
    getList();
};

let params = ref<TeacherType>({
    pageSize: 10,
    pageNum: 1,
    name: '',
    mobile: '',
    id: ''
});
// 表格
const tableData = ref();
let total = ref();

// 列表请求
function getList() {
    getTeacherList(params.value).then((res: any) => {
        if (res.code === 200) {
            console.log(res);
            tableData.value = res.rows;
            total.value = res.total;
        }
    });
}

getList();


// 弹框

const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
    done();
};

// 编辑
const deleteRow = (index: number) => {
    tableData.value.splice(index, 1);
};

// 改变页数
function currentChange(val: number) {
    console.log(val);
    params.value.pageNum = val;
    getList();
}

let ruleFormAdd = reactive({
    avatar: '',
    userId: '',
    weight: 100,
    labels: ''
});
const title = ref('添加');
const imageUrl = ref('');
const header = reactive({
    Authorization: 'Bearer ' + getToken()
});
const action = import.meta.env.VITE_APP_BASE_API + '/common/upload';

// 成功

function handleAvatarSuccess(response: any, uploadFile: any) {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!);
    ruleFormAdd.avatar = response.url;
}

const rules = reactive({
    avatar: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
    ]
});


// 请求学生列表
const userList = ref();
getUserList({ pageSize: 10000, pageNum: 1 }).then((res: any) => {
    console.log(res);
    userList.value = res.rows;
});
const options = ref();

function add() {
    title.value = '添加';
    dialogVisible.value = true;
    getLabelList({ pageSize: 10000, pageNum: 1 }).then((res: any) => {
        console.log(res);
        options.value = res.rows;
    });
}

function submission() {
    console.log(ruleFormAdd);
}

function editable(row: any) {
    console.log(row);
    title.value = '编辑';
    dialogVisible.value = true;
    imageUrl.value = import.meta.env.VITE_APP_BASE_API + row.row.avatar;
    ruleFormAdd = row.row;
    console.log(ruleFormAdd);
    console.log(imageUrl.value);
}
</script>

<template>
    <div class="app-container">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            inline
        >
            <el-form-item label="姓名">
                <el-input v-model="ruleForm.name" type="text" />
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="ruleForm.mobile" type="text" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">搜索</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="add" style="margin-bottom: 20px">
            添加
        </el-button>
        <el-table highlight-current-row :data="tableData" border style="width: 100%">
            <el-table-column type="index" width="100" label="序号" />
            <el-table-column prop="name" label="用户名称" width="180" />
            <el-table-column prop="phone" label="联系电话" width="180" />
            <el-table-column prop="mobile" label="办公电话" width="180" />
            <el-table-column prop="location" label="地址" width="180" />
            <el-table-column prop="createTime" label="创建时间" width="180" />
            <el-table-column fixed="right" label="Operations" min-width="120">
                <template #default="scope">
                    <el-button
                        type="primary"
                        @click="editable(scope)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        type="danger"
                        @click="deleteRow(scope)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next"
                       :total="total"
                       @current-change="currentChange" />
        <!--        弹框-->
        <el-dialog
            v-model="dialogVisible"
            :title="title"
            width="500"
            :before-close="handleClose"
        >
            <el-form
                ref="ruleFormRef"
                :model="ruleFormAdd"
                :rules="rules"
            >
                <el-form-item label="头像" prop="avatar">
                    <el-upload
                        class="avatar-uploader"
                        :action="action"
                        :headers="header"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="选择用户" prop="avatar">
                    <el-select v-model="ruleFormAdd.userId" placeholder="please select your zone">
                        <el-option v-for="item in userList" :key="item.userId" :label="item.nickName"
                                   :value="item.userId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="标签设置" prop="avatar">
                    <el-select
                        v-model="ruleFormAdd.labels"
                        multiple
                        placeholder="Select"
                        style="width: 240px"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="submission">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
